<!-- login.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link
      href="{% static 'bootstrap/css/bootstrap.min.css' %}"
      rel="stylesheet"
    />
    <style>
      #message-container {
        aquamarine: sideIn 0.8s ease-out;
        position: fixed;
        top: 5%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 通过负的50%的偏移量实现居中 */
        z-index: 9999;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 这里是用来显示消息的地方 -->
      <div id="message-container"></div>
    </div>
    <div class="container mt-5">
      <div class="row justify-content-center">
        <div class="col-md-5">
          <div class="card">
            <div class="card-header">登录</div>
            <div class="card-body">
              <form method="post">
                {% csrf_token %}
                <div class="form-group row">
                  <label
                    for="username"
                    class="col-sm-3 col-form-label"
                    style="text-align: right"
                    >用户名</label
                  >
                  <div class="col-sm-9" style="text-align: left">
                    <input
                      type="text"
                      class="form-control"
                      id="username"
                      name="username"
                      required
                    />
                  </div>
                </div>
                <div class="form-group row">
                  <label
                    for="password"
                    class="col-sm-3 col-form-label"
                    style="text-align: right"
                    >密码</label
                  >
                  <div class="col-sm-9" style="text-align: left">
                    <input
                      type="password"
                      class="form-control"
                      id="password"
                      name="password"
                      required
                    />
                  </div>
                </div>
                <div class="form-group row">
                  <div class="col-sm-12" style="text-align: right">
                    <button type="submit" class="btn btn-primary">登录</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="{% static 'jquery/jquery-3.5.1.slim.min.js' %}"></script>
    <script src="{% static 'popper/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            // 获取消息并显示
            var messages = [
            {% for message in messages %}
                {
                    "tag": "{{ message.tags }}",
                    "text": "{{ message }}"
                },
            {% endfor %}
        ];

        messages.forEach(function(message) {
          showMessage(message.tag, message.text)
        });

        function getAlertClass(tag) {
          switch (tag) {
              case 'success':
                  return 'alert-success';
              case 'info':
                  return 'alert-info';
              case 'warning':
                  return 'alert-warning';
              case 'error':
                  return 'alert-danger';
              default:
                  return 'alert-info';
          }
      }

        function showMessage(type, text) {
          var alertClass = getAlertClass(type);
          var alertMessage = $('<div class="alert ' + alertClass + ' alert-dismissible fade show mt-3" role="alert" style="width:auto">' +
              '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
              '<span aria-hidden="true">&times;</span>' +
              '</button>' +
              text +
              '</div>');

          $('#message-container').prepend(alertMessage);

          // 自动关闭警告框
          setTimeout(function() {
              alertMessage.alert('close');
          }, 5000);  // 2 秒后自动关闭
        }
      })
    </script>
  </body>
</html>
